『Refactoring UI』
https://gyazo.com/74a6661bf9b35a56a7d2f7f6f1bba4b4
Adam Wathan 著
website
クソ高いので会社に買ってもらったmrsekut.icon
$99
15,000円ぐらいしたぞ...
/mrsekut-book-refactor-ui
200ページ程度しかなく、図も多いので割とさくさく進む
全体を通してNG例、OK例の具体例をちゃんと示しているのが良い
目次
/mrsekut-book-refactor-ui/002 (Contents)
Starting from Scratch
/mrsekut-book-refactor-ui/005 (1 Starting from Scratch)
著者がエンジニアというのもあってか、エンジニアリングと親和性が高いmrsekut.icon
デザインから考えるのではなく、機能から考えろ
最初からCSSでデザインを作る
デザインの個性
フォントとか色とかの要素の選択の積み重ね
だが、常に無限の選択肢の中から選択するのは骨が折れる
だから、予め選択肢を制限しておいて、その中から選ぶようにする
つまり、Design Systemのこと
Hierarchy is Everything
/mrsekut-book-refactor-ui/028 (2 Hierarchy is Everything)
UIのメリハリの付け方
情報に優先順位をつけて表示しよう、ということ
UIに強弱をつける
Layout and Spacing
/mrsekut-book-refactor-ui/054 (3 Layout and Spacing)
余白を取る
必要ないのに画面幅いっぱいのレイアウトにしない
実装上でgrid systemを使わない
画面サイズに合わせて適切な相対値を使う
Designing Text
/mrsekut-book-refactor-ui/086 (4 Designing Text)
font sizeの選択理由
Fontの選択理由
Working with Color
/mrsekut-book-refactor-ui/117 (5 Working with Color)
CSSではRGBではなくHSLを使う
HSLは人間の目が直感的に感じる属性を使って色を指定できる
/mrsekut-book-refactor-ui/118 (Ditch hex for HSL)
色の選択
HSLを気にしたカラーパレットの作り方
/mrsekut-book-refactor-ui/132 (Don't let lightness kill your saturation)
ただ単純に機械的に決めても上手く行かず、ちょっとコツが要る
面白いけど、HSLに馴染みにがないので頭に入りづらかったmrsekut.icon
『色彩検定 公式テキスト 3級編』とか読んでから再読したほうが良さそうmrsekut.icon
Creating Depth
/mrsekut-book-refactor-ui/148 (Creating Depth)
Emulate a light source
要素が背景から浮き上がっていたり、はめ込まれているように見えるUIについて
絵を描ける人なら当然知ってるだろうみたいな内容だなmrsekut.icon
それと、最近のweb designだとあまりそういう凹凸つけないよなあ
Use shadows to convey elevation
Shadows can have two parts
shadowを付ける
/mrsekut-book-refactor-ui/166 (Even flat designs can have depth)
フラットデザインにも奥行きはある
Working with Images
/mrsekut-book-refactor-ui/172 (6 Working with Iamges)
Use good photos
174
Text needs consistent contrast
176
Everything has an intended size
181
Beware user-uploaded content
187
Finishing Touches
/mrsekut-book-refactor-ui/190 (7 Finishing Touches)
もっと各要素をメリハリつけようぜ、みたいな章かな
UIに強弱をつける
Supercharge the defaults
192
Add color with accent borders
195
Decorate your backgrounds
198
Don’t overlook empty states
203
Use fewer borders
/mrsekut-book-refactor-ui/205 (Use fewer borders)
Think outside the box
先入観にとらわれるな!
Leveling Up
/mrsekut-book-refactor-ui/214 (8 Leveling Up)
Leveling up
#スクボ読書化した本